<template>
  <div>
    <van-field
    v-model="fieldValue"
    is-link
    readonly
    label="地区"
    placeholder="请选择所在地区"
    @click="show = true"
    />
    <van-popup v-model="show" round position="bottom">
        <van-area  :area-list="areaList"  @confirm="onFinish"/>
    </van-popup>
        <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination> -->
  </div>
</template>

<script>
const areaList = {
  province_list: {
    110000: '北京市',
    120000: '天津市'
  },
  city_list: {
    110100: '北京市',
    120100: '天津市'
  },
  county_list: {
    110101: '东城区',
    110102: '西城区'
    // ....
  }
}
export default {
  data () {
    return {
      show: false,
      fieldValue: '',
      cascaderValue: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: '浙江省',
          value: '330000',
          children: [{ text: '杭州市', value: '330100' }]
        },
        {
          text: '江苏省',
          value: '320000',
          children: [{ text: '南京市', value: '320100' }]
        }
      ],
      areaList
    }
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish (x) {
      console.log(x)
      this.show = false
      //   this.fieldValue = this.areaList[0].name + this.areaList[1].name + this.areaList[2].name
      const val = [...new Set(x.map(item => item.name))].join('   ')
      console.log(val)
      this.fieldValue = val
    }
  }
}
</script>

<style>

</style>
